
<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>{{title}}</title>
	</head>
	<style type="text/css">
		.userConfig_box {
			max-width: 400px;
			min-width: 400px;
			margin: 100px auto;
		}
		
		.display_none {
			display: none;
		}
		
		.errDiv {
			transition: all 0.5s;
		}
	</style>

	<body style="height: 10000px;">
		{{include "./header2.html"}}

		<div class="userConfig_box">
			<div id="errDiv" errCode="{{code}}" class=" display_none alert alert-success alert-dismissable">
				<span id="errMsg">邮箱已被使用</span>
			</div>
			<ul class="nav nav-tabs">
				<li role="presentation" name="name" class="nav_item active">
					<a href="#">昵称</a>
				</li>
				<li role="presentation" name="avatar" class="nav_item ">
					<a href="#">头像</a>
				</li>
				<li role="presentation" name="password" class="nav_item">
					<a href="#">密码</a>
				</li>
			</ul>
			<br />
			<div class="changeName_form">
				<form action="/changeName" method="post">
					<input type="text" name="name" id="newName" value="{{name}}" placeholder="昵称" class="form-control" />
					<br />
					<input type="submit" id="submit_changeName" class="btn btn-lg btn-info btn-block" onclick="return false" value="更新" />
				</form>
			</div>

			<div class="changeAvatar_form display_none">
				<div class="container" style="width: 100%;">
					<div class="col-xs-12 ">
						<img id="preview" class="img-thumbnail " />
					</div>
					<input type="file" name="file" class="  form-control" id="input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onChange="imgPreview(this)">
					<input type="submit" id="submit_changeAvatar" class="btn btn-lg btn-info btn-block" onclick="fileUload()" value="上传" />
				</div>


			</div>
			<div class="changePwd_form display_none">
				<form action="/changePassword" method="post">
					<input type="password" name="oldPassword" id="oldPassword" placeholder="输入原密码" class="form-control" />
					<br />
					<input type="password" name="newPassword" id="newPassword" placeholder="新密码 6-16位,区分大小写,不能用空格" class="form-control" />
					<br />
					<input type="password" name="conformPassword" id="conformPassword" placeholder="新密码 6-16位,区分大小写,不能用空格" class="form-control" />
					<br />
					<input type="submit" id="submit_changePassword" class="btn btn-lg btn-info btn-block" onclick="return false" value="更新" />
				</form>
			</div>
		</div>

	</body>

</html>
<script type="text/javascript">
	
	
	//将图案发送后台
	function fileUload() {
		var imgfile = $('#input_file')[0].files[0];
		var imageType = /^image\//;
		
		//是否是图片
		if(!imageType.test(imgfile.type)) {
			showErrDiv("请选图片文件上传！")
			return 
		}
		var formData = new FormData();
		formData.append('file',imgfile ); //添加图片信息的参数
		formData.append('sizeid', 123); //添加其他参数
		$.ajax({
			url: '/userConfig/changeAvatar',
			type: 'POST',
			cache: false, //上传文件不需要缓存
			data: formData,
			processData: false, // 告诉jQuery不要去处理发送的数据
			contentType: false, // 告诉jQuery不要去设置Content-Type请求头
			success: function(rs) {
				//var rs = eval("(" + data + ")");
					showErrDiv(rs.info);
					$("#avatar").attr("src",rs.avatar)
			},
			error: function(data) {
				showErrDiv("上传失败");
			}
		})

	}



	$(".nav_item").on("click", function() {
		$("#errDiv").addClass("display_none")
		$(".nav_item").removeClass("active")
		$(this).addClass("active")
		var name = $(this).attr("name")
		if(name == "name") {
			$(".changeName_form").removeClass("display_none")
			$(".changePwd_form").addClass("display_none")
			$(".changeAvatar_form").addClass("display_none")
		} else if(name == "avatar") {
			$(".changeName_form").addClass("display_none")
			$(".changePwd_form").addClass("display_none")
			$(".changeAvatar_form").removeClass("display_none")
		} else if(name == "password") {
			$(".changeName_form").addClass("display_none")
			$(".changePwd_form").removeClass("display_none")
			$(".changeAvatar_form").addClass("display_none")
		}

	})

	$("#submit_changeName").on("click", function() {
		console.log("点击修改昵称")
		checkChangeName()

	})

	$("#submit_changePassword").on("click", function() {
		console.log("点击注册")
		checkchangePassword()

	})

	function checkchangePassword() {
		var oldpwd = $("#oldPassword").val()
		var newpwd = $("#newPassword").val()
		var conformpwd = $("#conformPassword").val()
		var pwd_reg = /^(\w){6,16}$/
		var data = ({
			password: oldpwd,
			newpwd: newpwd
		})

		if(pwd_reg.test(newpwd)) {
			if(newpwd == conformpwd) {
				change_name_pwd_post("/changePassword", data, function(arg) {
					showErrDiv(arg.info)

					//location.href = "/"
				})
			} else {
				showErrDiv("两次输入的密码不一致！")
			}
		} else {
			//密码格式不对
			showErrDiv("密码格式不对")
		}

	}

	//定义一个修改密码昵称共用的ajax同步请求
	function change_name_pwd_post(urlpath, datas, callback) {
		$.ajax({
			url: "/userConfig"+urlpath,
			type: "POST",
			data: datas,
			async: false, //这里表示同步
			dataType: 'json',
			cache: false,
			success: function(args) {
				callback(args)
			} //请求成功返回后执行的动作

		});
	}

	function showErrDiv(info) {
		$("#errDiv").removeClass("display_none")
		$("#errMsg").text(info)
	}

	function checkChangeName() {
		var name = $("#newName").val()
		var name_reg = /^[\w\u4e00-\u9fa5]{2,18}$/

		if(name_reg.test(name)) {
			$("#errDiv").addClass("display_none")
			var data = {
				name: name
			}
			change_name_pwd_post("/changeName", data, function(arg) {
				$(".userConfig .name").text(arg.name)
				showErrDiv(arg.info)
			})
		} else {
			//昵称格式不对
			showErrDiv("昵称格式不正确！")
		}

	}

	//图片预览功能	
	function imgPreview(fileDom) {
		//判断是否支持FileReader
		if(window.FileReader) {
			var reader = new FileReader();
		} else {
			alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
		}
		//获取文件
		var file = fileDom.files[0];
		var imageType = /^image\//;
		//是否是图片
		if(!imageType.test(file.type)) {
			showErrDiv("请选择图片！");
			return;
		}
		//读取完成
		reader.onload = function(e) {
			//获取图片dom
			var img = document.getElementById("preview");
			//图片路径设置为读取的图片
			img.src = e.target.result;
		};
		reader.readAsDataURL(file);
	}
</script>